@using AntDesign.Charts
@using Title = AntDesign.Charts.Title

<Tabs>
    <TabPane Key="1">
        <TabTemplate>示例1</TabTemplate>
        <ChildContent>
            <Bar Data="data1" Config="config1"/>
        </ChildContent>
    </TabPane>
    <TabPane Key="2">
        <TabTemplate>示例2</TabTemplate>
        <ChildContent>
            <Bar Data="data2" Config="config2"/>
        </ChildContent>
    </TabPane>
</Tabs>

@code{

    #region 示例1

    readonly object[] data1 =
    {
        new {type = "分类一", values = new[] {76, 100}},
        new {type = "分类二", values = new[] {56, 108}},
        new {type = "分类三", values = new[] {38, 129}},
        new {type = "分类四", values = new[] {58, 155}},
        new {type = "分类五", values = new[] {45, 120}},
        new {type = "分类六", values = new[] {23, 99}},
        new {type = "分类七", values = new[] {18, 56}},
        new {type = "分类八", values = new[] {18, 34}}
    };

    readonly BarConfig config1 = new BarConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "区间条形图"
        },
        XField = "values",
        YField = "type"
    };

    #endregion 示例1

    #region 示例2

    readonly object[] data2 =
    {
        new {type = "分类一", values = new[] {76, 100}},
        new {type = "分类二", values = new[] {56, 108}},
        new {type = "分类三", values = new[] {38, 129}},
        new {type = "分类四", values = new[] {58, 155}},
        new {type = "分类五", values = new[] {45, 120}},
        new {type = "分类六", values = new[] {23, 99}},
        new {type = "分类七", values = new[] {18, 56}},
        new {type = "分类八", values = new[] {18, 34}}
    };

    readonly BarConfig config2 = new BarConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "为区间条形图配置label样式"
        },
        Description = new Description
        {
            Visible = true,
            Text = "使用style配置项配置label整体样式，同时支持通过leftStyle和rightStyle分别配置label样式。"
        },
        XField = "values",
        YField = "type",
        Color = new[] {"l(0) 0:#3e5bdb 1:#dd3121"},
        IsRange = true,
        Label = new BarViewConfigLabel()
        {
            Position = "middle",
            Layout = new []
            {
                new LayoutType()
                {
                    Type = "adjust-color"
                }
            }
        }
        // ColumnStyle = new
        // {
        //     FillOpacity = 0.8
        // },
        // Label = new BarViewConfigLabel
        // {
        //     Visible = true,
        //     LeftStyle = new
        //     {
        //         Fill = "#3e5bdb"
        //     },
        //     RightStyle = new
        //     {
        //         Fill = "#dd3121"
        //     }
        // }
    };

    #endregion 示例2

}